<template>
  <el-card class="contaniar">
    <el-breadcrumb v-if="isShow" style="height:30px" separator-class="el-icon-arrow-right">
      <el-breadcrumb-item>学科管理</el-breadcrumb-item>
      <el-breadcrumb-item>{{ mianName }}</el-breadcrumb-item>
      <el-breadcrumb-item>目录管理</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 头部 -->
    <div>
      <el-row type="flex" justify="space-between" style="height: 100px">
        <el-col :span="20" type="flex" justify="space-between">
          <el-col :span="6" type="flex" justify="space-between">
            <span style="margin-right: 10px">目录名称</span>
            <el-input
              v-model="queryData.directoryName"
              size="small"
              placeholder=""
              style="width: 180px"
              @clear="search"
            />
          </el-col>
          <el-col :span="12">
            <el-form
              ref="form"
              :model="formData"
              label-width="180px"
              style="height: 50px"
            >
              <el-form-item
                label="状态"
                style="display: inline-block; padding-right: 10px"
              >
                <el-select v-model="queryData.state" placeholder="请选择状态">
                  <!-- 在这里循环这个 label 是要显示的值 value 是要传的值-->
                  <el-option
                    v-for="item in options"
                    :key="item.label"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
              <el-form-item style="width: 400px">
                <el-button
                  size="small"
                  type="primary"
                  @click="qingC"
                >清除</el-button>
                <el-button
                  size="small"
                  type="primary"
                  @click="search"
                >搜索</el-button>
              </el-form-item>
            </el-form>
          </el-col>
        </el-col>
        <el-col :span="2">
          <el-button v-if="isShow" type="primary" @click="fanhui(row)">返回学科</el-button>
        </el-col>
        <el-col :span="2">
          <el-button
            type="success"
            @click="isDialog = true"
          >新增目录</el-button>
        </el-col>
      </el-row></div>
    <!-- 数据一共多少条 -->
    <div class="title" style="background:#f4f4f5;height:40px;line-height: 40px;padding-left:10px">
      <i class="el-icon-info" />
      数据一共{{ total }}条
    </div>
    <hr>
    <!-- 数据表单 -->
    <el-table :data="list" style="width: 100%">
      <el-table-column type="index" label="序号" width="80" />
      <el-table-column prop="subjectName" label="所属学科" width="180" />
      <el-table-column prop="directoryName" label="目录名称" width="140" />
      <el-table-column prop="username" label="创建者" width="180" />
      <el-table-column prop="addDate" label="创建日期" width="200" />
      <el-table-column prop="totals" label="面试题数量" width="140" />
      <el-table-column prop="state" label="状态" width="140">
        <template slot-scope="{ row }">
          {{ row.state ? "已启用" : "已禁用" }}
        </template>
      </el-table-column>
      <el-table-column label="操作" width="140">
        <template slot-scope="{ row }">
          <!-- {{ row }} -->
          <el-button
            type="text"
            @click="kaiG(row)"
          >{{ row.state ? "禁用" : "启用" }}
          </el-button>
          <el-button
            type="text"
            :disabled="row.state ? true : false"
            @click="edit(row)"
          >修改</el-button>
          <el-button
            type="text"
            :disabled="row.state ? true : false"
            @click="del(row.id)"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 页码 -->
    <!-- 页码 -->
    <el-pagination
      style="margin-left: 900px"
      background
      :current-page="queryData.page"
      :page-sizes="[10, 3, 5, 10]"
      :page-size="queryData.pagesize"
      layout="prev, pager, next, jumper,sizes"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
    <!-- 修改/增加 -->
    <el-dialog
      :title="isEdit ? '修改目录' : '增加目录'"
      :visible.sync="isDialog"
      width="50%"
      @close="cancel"
    >
      <el-form ref="form" :model="formData" :rules="rules">
        <el-form-item label="所属学科" prop="subjectName">
          <el-select
            v-model="formData.subjectID"
            label="请选择"
            :placeholder="formData.subjectName"
          >
            <el-option
              v-for="item in depts"
              :key="item.id"
              :value="item.id"
              :label="item.subjectName"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="目录名称" prop="directoryName">
          <el-input v-model="formData.directoryName" />
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="btnOK">确 定</el-button>
      </div>
    </el-dialog>
  </el-card>
</template>

<script>
import {
  getDirectorys,
  stateDirectorys,
  delDirectorys,
  editDirectorys,
  addDirectorys,
  xiangDirectorys
} from '@/api/subjects/directorys'
import { subjectsList } from '@/api/subjects/subjects'
export default {
  name: 'Directorys',
  data() {
    return {
      // 搜索 自己创建一个数组对象 label 是要显示的值 value 是要传的值
      options: [
        { value: 1, label: '已启用' },
        { value: 0, label: '已禁用' }
      ],
      // 判断返回按钮显示
      isShow: false,
      // 面包屑
      mianName: '',
      // 1数据仓库
      list: [],
      value2: '', // 搜索状态
      // 修改要用的仓库
      depts: [],
      value: '',
      title: '',
      // 按钮开启或者禁用 disabled
      // falg: "",
      state: '',
      id: '',
      total: 0, // 总数
      queryData: {
        page: 1,
        pagesize: 10,
        subjectName: ''
      },
      // 修改表单和增加表单
      isDialog: false,
      // 修改表单 选择
      formData: {
        id: '',
        // region: '',
        subjectID: '',
        subjectName: '',
        directoryName: ''
      },
      // 新增学科

      // 修改校验规则
      rules: {
        subjectName: [{ }]
      }
    }
  },
  // 选择表单是修改或者添加
  computed: {
    isEdit() {
      return !!this.formData.id
    }
  },
  // 监听页面变化
  watch: {
    $route: {
      deep: true,
      // 立即监听一次
      immediate: true,
      handler(val) {
        this.initData()
      }
    }
  },
  created() {
    // 3. 调用方法
    this.initData()
    if (this.$route.query.directoryName) {
      this.mianName = this.$route.query.directoryName
      this.isShow = true
    }
  },
  methods: {
    // 2 请求数据方法
    async initData() {
      const { items, counts } = await getDirectorys({
        ...this.queryData,
        subjectName: this.$route.query.directoryName,
        subjectID: this.$route.query.subjectID
      })
      const newitems = await subjectsList(this.formData)
      this.depts = newitems.items
      this.list = items
      this.total = counts

      items.map((item) => {
        const arr1 = item.addDate.replace('T', ' ')
        const arr2 = arr1.replace('.000Z', ' ')
        // console.log(arr2);
        item.addDate = arr2
      })
    },
    // 搜索
    search() {
      // console.log(this.formData);
      this.initData(this.queryData)
    },

    // 分页
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      this.queryData.pagesize = val
      this.initData()
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.queryData.page = val
      this.initData()
    },
    // 添加 修改
    async btnOK() {
      await this.$refs.form.validate()
      if (this.isEdit) {
        console.log(this.formData.subjectID)
        await editDirectorys(this.formData)
      }
      if (!this.isEdit) {
        console.log(this.formData)
        this.formData.id = this.total
        this.formData.subjectID = this.total
        await addDirectorys(this.formData)
        console.log(this.formData)
      }
      this.$message.success('操作成功')
      this.initData()
      this.cancel()
      // this.isDialog = false;
    },
    cancel() {
      this.$refs.form.resetFields()
      this.formData = {}
      this.isDialog = false
    },
    // 删除
    async del(id) {
      await this.$confirm('确定删除')
      await delDirectorys(id)
      this.$message.success('删除成功')
      if (this.queryData.page !== 1 && this.queryData.size === 1) {
        this.queryData.page--
      }
      this.initData()
    },
    // 修改 (目录详情)
    async edit(val) {
      console.log(val)
      this.formData.subjectName = val.subjectName
      const res = await xiangDirectorys(val.id)
      console.log(res)
      this.formData = res
      this.isDialog = true
    },

    // 按钮的禁用和开启
    async kaiG(val) {
      try {
        if (val.state) {
          val.state = 0
        } else {
          val.state = 1
        }
        await stateDirectorys(val.id, val.state)
        console.log(val.state)
        let num = val.state
        console.log(num)
        if (num) {
          num = 1
        } else {
          num = 0
        }
        // eslint-disable-next-line require-atomic-updates
        val.state = num * 1
        console.log(val.state)
        this.$message.success('修改成功')
        this.initData()
      } catch (error) {
        return this.$message.error('修改失败')
      }
    },
    // 清除搜索框
    qingC() {
      this.queryData.directoryName = ''
      this.initData(this.queryData)
    },
    // 返回学科
    fanhui() {
      // console.log(val)
      this.$router.push('/subjects/list')
    }
  }
}
</script>

<style scoped lang='less'>
.navbar {
  height: 50px;
}
.contaniar {
  margin: 20px;
  margin-top: 40px;
}
.title {
  margin-top: 10px;
}
/deep/ .el-card__body {
  .el-form {
    width: 400px;
  }
}
</style>
